<template>
  <div>
    <Bread />
    <div class="self-container">
      <div class="flex detailInfo">
        <div class="image">
          <el-image
            :src="detailInfo.pictures"
            fit="cover"
            style="width: 100%;height: 100%;"
          >
            <!-- <div slot="error" style="width: 100%; height: 100%;"><el-image :src="require('@/assets/img/pic_error.png')" style="width: 100%; height: 100%;"></el-image></div> -->
          </el-image>
        </div>

        <div class=" flex flex-col justify-between context">
          <div class="title">{{ detailInfo.name }}</div>
          <ul class="info">
            <li>
              <span class="label">活动时间：</span>
              <span class="pl-4 text-sm">
                {{ parseTime(detailInfo.startTime, '{y}-{m}-{d}  {h}:{i}') }} -
                {{ parseTime(detailInfo.endTime, '{y}-{m}-{d} {h}:{i}') }}
              </span>
            </li>
            <li>
              <span class="label">活动地点：</span>
              <span>{{ detailInfo.address }}</span>
            </li>
            <li>
              <span class="label">价格：</span>
              <span class="text-red-500">{{ detailInfo.price }}</span>
            </li>
            <li>
              <span class="label">浏览人数：</span>
              <span>{{ detailInfo.browse }}</span>
            </li>
          </ul>
          <el-button
            type="info"
            class="w-24 mt-2 border-0"
            :style="{
              background: activityStatusObj(detailInfo.activityStatus)[
                'bgColor'
              ],
            }"
          >
            {{ activityStatusObj(detailInfo.activityStatus)['dictLabel'] }}
          </el-button>
        </div>
      </div>
      <div class="main-content">
        <div class="content">
          <div class="content-head">
            活动详情
          </div>
          <div v-html="detailInfo.details" class="content"></div>
        </div>
        <div class="aside" style="max-height:1200px">
          <h5 class="relative -top-1 py-4 border-t-4 border-blue-500 px-4">
            相关推荐
          </h5>
          <ul class="info-container">
            <li
              v-for="item in recommendList"
              :key="item.id"
              class="info-item"
              @click="toDetail(item.id)"
            >
              <div>
                <div
                  class="head-sm-img"
                  :style="{
                    background: `url(${item.picture})`,
                    backgroundSize: 'cover',
                    backgroundRepeat: 'no-repeat',
                  }"
                ></div>
                <div class="info-title">
                  {{ item.name }}
                </div>
              </div>

              <div>
                <div class="sub-info-title">
                  <i class="el-icon-time"> </i>
                  <span class="pl-4 text-sm">
                    {{ parseTime(item.startTime, '{y}-{m}-{d}') }} -
                    {{ parseTime(item.endTime, '{y}-{m}-{d}') }}
                  </span>
                </div>

                <div class="sub-info-title">
                  <i class="el-icon-location-outline"> </i>
                  <span class="pl-4">
                    {{ item.address }}
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '@/components/Bread'
import { getActiveDetail, getActiveReList } from '@/api/innovateActive'

export default {
  components: {
    Bread,
  },
  data() {
    return {
      detailInfo: {
        // id: 124,
        // name: '预见独角兽学院吴世春导师班第二季',
        // synopsis: null,
        // picture:
        //   'http://file.thinkervc.cn/7khiwad4lgxd4ioat6j3lsrs2fvpuvjyyollcb312ziy6bnhyh0x271gkd2b1isrvy7w33v48rb5u53b.jpg',
        // address: '北京、南昌、赣州丫山',
        // browse: 342,
        // startTime: '2021-12-01 09:00:00',
        // endTime: '2021-12-30 00:00:00',
        // publishTime: '2021-03-30 18:44:28',
        // price: 10000000,
        // activityStatus: '1',
        // ticketNum: 12,
        // content: `<h2 style="text-align:center;">
        //             <b>活动详情</b>
        //           </h2>
        //           <p>
        //             <span style="font-size:14px;color:#666666;">Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.</span>
        //           </p>
        //           <p>
        //             <span style="color:#666666;">- Apple Inc.</span>
        //           </p>`,
      },

      recommendList: [
        // {
        //   id: 124,
        //   name: '预见独角兽学院吴世春导师班第二季',
        //   synopsis: null,
        //   picture:
        //     'http://file.thinkervc.cn/7khiwad4lgxd4ioat6j3lsrs2fvpuvjyyollcb312ziy6bnhyh0x271gkd2b1isrvy7w33v48rb5u53b.jpg',
        //   address: '北京、南昌、赣州丫山',
        //   browse: 342,
        //   startTime: '2021-12-01 09:00:00',
        //   endTime: '2021-12-30 00:00:00',
        //   publishTime: '2021-03-30 18:44:28',
        //   price: 10000000,
        //   activityStatus: '1',
        //   ticketNum: 12,
        // },
      ],
      statusTypeList: [
        {
          dictLabel: '报名中',
          bgColor: '#1985F0',
          minTicketNum: 1,
          isOverTime: 0,
        },
        {
          dictLabel: '进行中',
          bgColor: '#F08519',
          minTicketNum: 0,
          isOverTime: 0,
        },
        {
          dictLabel: '已结束',
          bgColor: '#9D9D9D',
          minTicketNum: 0,
          isOverTime: 1,
        },
      ],
    }
  },
  computed: {
    activityStatusObj() {
      return function(value) {
        switch (Number(value)) {
          case 0:
            return this.statusTypeList[0]
          case 1:
            return this.statusTypeList[1]
          case 2:
            return this.statusTypeList[2]
          default:
            return {
              dictLabel: '未知',
              bgColor: '#9D9D9D',
              minTicketNum: 0,
              isOverTime: 1,
            }
        }
      }
    },
    statusObj() {
      return (activeItem) => {
        let activeTime = new Date(activeItem.endTime).valueOf()
        let nowTime = new Date().valueOf()
        let isOverTime = nowTime - activeTime > 0 ? 1 : 0
        let ticketNum = activeItem.ticketNum
        let findItem = this.statusTypeList.find((item) => {
          return (
            item.isOverTime === isOverTime && ticketNum >= item.minTicketNum
          )
        })
        return findItem
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.request()
      vm.getRecommendList()
    })
  },
  watch: {
    $route(v) {
      this.request(v.params.id)
      this.getRecommendList()
    },
  },
  methods: {
    request(id) {
      if (!id && id !== 0) {
        id = this.$route.params.id
      }
      this.detailInfo.managementId = id
      getActiveDetail({ id }).then((res) => {
        if (res.code === 200) {
          this.detailInfo = res.data
        }
      })
    },
    toDetail(id) {
      this.$router.push({ path: '/innovateActivity/innovateActivDetail/' + id })
    },
    getRecommendList() {
      getActiveReList().then((res) => {
        if (res.code === 200) {
          this.recommendList = res.data.data.slice(0, 5)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.detailInfo {
  margin-top: 3.375rem;
  min-height: 337px;
  .image {
    min-width: 491px;
    width: 491px;
  }

  .context {
    flex-grow: 1;
    padding: 2rem 2.5rem;
    background-color: #ecf4ff;

    .title {
      width: 100%;
      height: auto;
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }
    .info {
      @apply flex flex-col justify-between mt-2 text-gray-500;
      & > li {
        @apply pt-2;
      }
    }
    .desc {
      width: 100%;
      height: 14.25rem;

      .title {
        font-weight: bold;
        color: #333;
      }
    }
  }
}

.detail_box {
  margin-top: 1rem;
  margin-bottom: 7.5rem;
  padding: 1.625rem 0;

  .detail_header {
    position: relative;
    margin-left: 0.75rem;
    font-size: 20px;
    font-weight: bold;
    color: #1678ff;

    &::before {
      content: ' ';
      position: absolute;
      left: -0.75rem;
      top: 0.5rem;
      width: 0.25rem;
      height: 17px;
      background-color: #1678ff;
    }
  }

  .detail_content {
    padding: 1rem 0;
    width: 100%;
    min-height: 20vh;

    ::v-deep img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
}

.main-content {
  @apply flex py-8;

  .content {
    @apply flex-grow p-0 pr-4;
  }
  .aside {
    min-width: 390px;
    width: 390px;
    max-height: 500px;
    @apply border  border-gray-300;
    .line-1 {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
    .recommend-item {
      @apply py-4 border-b cursor-pointer;
    }
  }
}
.info-container {
  @apply w-full p-4;

  .info-item {
    width: 100%;
    height: 313px;

    @apply flex flex-col justify-between cursor-pointer rounded-md bg-white transition-all duration-150;
    &:hover {
      box-shadow: 0px 5px 10px 0px rgba(22, 120, 255, 0.2);
    }
    .info-title {
      font-size: 14px;
      height: 3rem;
      line-height: 1.5rem;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      @apply font-bold m-4;
    }
    .head-sm-img {
      height: 182px;
      overflow: hidden;
    }
    .sub-info-title {
      @apply leading-7 text-gray-400 text-sm px-4;
    }
  }
}
</style>
